<template>
    <div class="body">
        <!-- 整个项目容器 -->
        <el-container>
            <!-- 顶栏 -->
            <el-header class="layout_header">
                <h1>憨宠商城后台管理</h1>
                <el-dropdown style="float: right;margin: 10px">
                    <el-avatar :src="circleUrl">
                    </el-avatar>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <i class="el-icon-s-release"></i>
                            退出登录
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

                <h1 style="float: right">
                    <span>欢迎xxx登录</span>
                </h1>
            </el-header>
            <!-- 下半部分区域 -->
            <el-container class="layout_body">
                <!-- 左侧边栏 -->
                <el-aside class="layout_aside">
                    <el-menu
                            router
                            :default-active="$router.currentRoute.path"
                            class="el-menu-vertical-demo"
                            background-color="#F56C6C"
                            text-color="#fff"
                            active-text-color="#fff">
                        <el-menu-item index="/sys-admin/temp/index"><i class="el-icon-s-home"></i>首页</el-menu-item>

                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-s-shop"></i>
                                <span>商城管理</span>
                            </template>

                            <el-submenu index="2-1">
                                <template slot="title">
                                    <i class="el-icon-s-goods"></i>
                                    商品管理
                                </template>
                                <el-menu-item index="2-1-1">
                                    <i class="el-icon-circle-plus"></i>
                                    添加商品
                                </el-menu-item>
                                <el-menu-item index="2-1-2">
                                    <i class="el-icon-s-operation"></i>
                                    商品列表
                                </el-menu-item>
                                <el-menu-item index="/sys-admin/temp/brand/add-new">
                                    <i class="el-icon-circle-plus"></i>
                                    添加品牌
                                </el-menu-item>
                                <el-menu-item index="/sys-admin/temp/brand/list">
                                    <i class="el-icon-s-operation"></i>
                                    品牌列表
                                </el-menu-item>
                                <el-menu-item index="/sys-admin/temp/template/add-new">
                                    <i class="el-icon-circle-plus"></i>
                                    添加属性模板
                                </el-menu-item>
                                <el-menu-item index="/sys-admin/temp/template/list">
                                    <i class="el-icon-s-operation"></i>
                                    属性模板列表
                                </el-menu-item>
                                <el-menu-item index="/sys-admin/temp/attribute/add-new">
                                    <i class="el-icon-circle-plus"></i>
                                    添加属性
                                </el-menu-item>
                                <el-menu-item index="/sys-admin/temp/attribute/list">
                                    <i class="el-icon-s-operation"></i>
                                    属性列表
                                </el-menu-item>
                            </el-submenu>

                            <el-submenu index="2-2">
                                <template slot="title">
                                    <i class="el-icon-s-marketing"></i>
                                    轮播图管理
                                </template>
                                <el-menu-item index="2-2-1">
                                    <i class="el-icon-circle-plus"></i>
                                    添加轮播图
                                </el-menu-item>
                                <el-menu-item index="2-2-2">
                                    <i class="el-icon-s-operation"></i>
                                    轮播图列表
                                </el-menu-item>
                            </el-submenu>

                            <el-submenu index="2-3">
                                <template slot="title">
                                    <i class="el-icon-s-grid"></i>
                                    类别管理
                                </template>
                                <el-menu-item index="2-3-1">
                                    <i class="el-icon-circle-plus"></i>
                                    添加类别
                                </el-menu-item>
                                <el-menu-item index="2-3-2">
                                    <i class="el-icon-s-operation"></i>
                                    类别列表
                                </el-menu-item>
                            </el-submenu>

                        </el-submenu>


                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-chat-round"></i>
                                <span>社区管理</span>
                            </template>

                            <el-menu-item index="3-1">
                                <i class="el-icon-search"></i>
                                帖子管理
                            </el-menu-item>

                            <el-menu-item class="3-2">
                                <i class="el-icon-search"></i>
                                评论管理
                            </el-menu-item>

                        </el-submenu>

                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-user-solid"></i>
                                <span>权限管理</span>
                            </template>

                            <el-menu-item index="/sys-admin/temp/admin/new-add">
                                <i class="el-icon-circle-plus"></i>
                                添加管理员
                            </el-menu-item>

                            <el-menu-item index="/sys-admin/temp/admin/list">
                                <i class="el-icon-s-operation"></i>
                                管理员列表
                            </el-menu-item>

                        </el-submenu>

                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-user-solid"></i>
                                <span>用户管理</span>
                            </template>
                            <el-menu-item index="/sys-admin/temp/ums/list">
                                <i class="el-icon-s-operation"></i>
                                用户列表
                            </el-menu-item>
                        </el-submenu>

                    </el-menu>
                </el-aside>
                <!-- 主体部分 -->
                <el-main class="layout_main">
                    <router-view/>
                </el-main>

            </el-container>
        </el-container>
    </div>
</template>

<style>
    .layout_header {
        background-color: #E6A23C;
        color: white;
    }

    .layout_header h1 {
        line-height: 60px;
        float: left;
    }

    .layout_body {
        position: absolute;
        top: 60px;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .layout_aside {
        background-color: #F56C6C;
    }

    .layout_aside i {
        color: white !important;
    }

    .el-menu-item.is-active {
        background-color: #F56ea2 !important;
    }

    .body{
      background-color: white;
    }
</style>

<script>
    export default {
        data() {
            return {
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
                sizeList: ["large", "medium", "small"]
            }
        },
      mounted() {
        console.log(localStorage.getItem("jwt"))
      }

    }
</script>

